<template>
  <nav>
    <ul>
      <li v-for="c in courseList" :key="c.id">
        <!-- params传参: 方式一 -->
        <!-- <router-link :to="`/desc/${c.name}/${c.id}`">{{c.name}}</router-link> -->
        <!-- params传参: 方式二 对象方式不能使用path:'/desc',要用路径名称-->
        <router-link :to="{
                            name:'desc',
                            params:{
                              name:c.name,
                              id:c.id
                            }
                          }">{{c.name}}</router-link>
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </nav>
</template>

<script>
  export default {
    name: 'Course',
    data() {
      return {
        courseList: [{
            id: 1,
            name: 'HTML'
          },
          {
            id: 2,
            name: 'CSS'
          },
          {
            id: 3,
            name: 'JQUERY'
          }
        ]
      }
    }
  }
</script>

<!--
  scoped: 样式作用域
  lang="sass": css语法
-->
<style scoped="scoped">
  li {
    list-style: none;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: orange;
  }

  nav a.router-link-exact-active {
    color: greenyellow;
  }
</style>
